<template>
	<view class="">
		<view class="box">
			<view class="flex order-lesson">
				<view class="f1 flex">
					<image v-if="product && product.cover" :src="$img(product.cover)" mode="aspectFill" class="order-img" />
					<image v-else src="/static/home/upload_img.png" mode="aspectFill" class="order-img" />
					<view class="lesson-info between column f1">
						<view v-if="product && product.title">{{ product.title }}</view>
						<view v-else>金果拜坚果拿铁</view>
						<view class="gray" v-if="!sku_key || !sku_key.length">规格：默认</view>
						<view class="flex" style="flex-wrap: wrap;" v-else>
							<view class="gray mr" v-for="(v,i) in sku_key" :key="i">{{ v }}：{{ sku_val[i] }}</view>
						</view>
						<view class="between align-c">
							<view class="gray" v-if="detail && detail.num">x{{ detail.num }}</view>
							<view class="gray" v-else>x1</view>
							<view class="price">
								<text class="price-util">￥</text>
								<text v-if="detail && detail.price">{{ detail.price }}</text>
								<text v-else>19</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="order-info">
				<view class="order-info-item flex" v-for="(v,i) in list" :key="i">
					<view class="">{{ v.name }}</view>
					<view class="f1" :class="{'bold': v.bold }">{{ v.value }}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				product: null,
				list: [
					{
						name: '订单编号',
						value: '1568946666412'
					},
					{
						name: '创建时间',
						value: '2022-11-30 14:20'
					},
				],
				detail: null,
				sku_key: [],
				sku_val: [],
			}
		},
		onLoad(e) {
			this.id = e.id;
			// this.getDetail();
		},
		methods: {
			async getDetail() {
				let res = await this.$api.get(`crm/order/detail/${this.id}`);
				if(res.code == 200) {
					let info = res.data;
					if(info.sku && info.sku.product_specs_key) {
						this.sku_key = info.sku.product_specs_key;
						this.sku_val = info.sku.product_specs_value;
					}else {
						this.sku_key = [];
						this.sku_val = [];
					}
					this.detail = res.data;
					this.product = res.data.product;
					this.list = [
						{
							name: '订单编号',
							value: info.order_sn ? info.order_sn : ''
						},
						{
							name: '创建时间',
							value: info.created_at ? info.created_at : ''
						},
					];
				}
			},
			
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>

<style lang="scss" scoped>
	.box {
		margin: 20rpx 0;
		padding: 40rpx 27rpx;
		padding-left: 33rpx;
		background-color: #FFF;
		padding-bottom: 20rpx;
	}
	.order-lesson{
		align-items: flex-end;
		.order-img {
			width: 133rpx;
			height: 133rpx;
			margin-right: 24rpx;
		}
		.lesson-info {
			font-size: 29rpx;
			.gray {
				color: #B3B3B3;
				font-size: 26rpx;
			}
			.mr {
				margin-right: 8rpx;
			}
			.mr::after {
				margin-left: 8rpx;
				content: '；';
			}
		}
	}
	.order-info{
		margin: 36rpx 0;
		margin-bottom: 0;
		font-size: 27rpx;
		.order-info-item {
			line-height: 60rpx;
			.f1 {
				text-align: right;
				color: #808080;
			}
			.bold {
				font-weight: bold;
				color: #333;
			}
		}
	}
	.price {
		color: #F51B1B !important;
		font-weight: bold;
		font-size: 32rpx;
		.price-util {
			font-size: 20rpx;
			font-weight: normal;
		}
	}
	
</style>